<template>
    <div>
        <h3>详情</h3>
        <p>标题：{{ title }}</p>
        <p>时间：{{ content }}</p>

    </div>
</template>
<script>
export default {
    data() {
        return {
            title: "",
            content: "",
            news: [
                { "id": 1, "title": '欧洲杯-莱万替补无功中超旧将点射 奥地利 3-1 波兰', "content": "2020-1-1" },
                { "id": 2, "title": '欧洲杯-乌克兰 2-1 逆转斯洛伐克 津琴科助攻铁腰传射', "content": "2020-1-2" },
                { "id": 3, "title": '抽象的强强碰撞，格列兹曼终结堪比卢卡库！德尚没姆巴佩真', "content": "2020-1-3" },
                { "id": 4, "title": '1-3!欧洲杯首支出线队浮现！莱万难阻两连败，被中超旧将', "content": "2020-1-4" },
            ]
        }
    },
    watch: {
        $route(to,form){
            this.newXiangqing(this.$route.params.id)
        }
    },
    methods: {
        // 根据父组件路由过来的参数查看详情
        newXiangqing(id){
            let newsDate = this.news.filter(temp=>temp.id==id)[0];
            this.content = newsDate.content;
            this.title = newsDate.title;
        },
    },
    created() {
        this.newXiangqing(this.$route.params.id)
    },
}
</script>